<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
        #main{
            margin: auto;
            border-radius: 10px;
        }
        #main2{
            /*margin-left: 700px;*/
            margin: auto;
            background-color: #fefefe;
            border-radius: 10px;
        }
        #main3{
            margin: auto;
            margin-top: 5px;
            margin-bottom: 5px;
            border-radius: 10px;
        }
        #main4{
            border-radius: 10px;
            margin-top: 5px;
            margin-bottom: 5px;
            margin: auto;
        }
        #main5{
            border-radius: 10px;
            margin-top: 5px;
            margin-bottom: 5px;
            margin: auto;
        }
    </style>
    <!-- 引入 ECharts 文件 -->
    <script th:src="@{/js/echarts.min.js}"></script>
</head>
<body>
<div id="main2" style="width: 1100px;height:300px; "></div>
<div id="main3" style="width: 1100px;height:300px; "></div>
<div id="main" style="width: 1100px;height:280px;"></div>
<div id="main4" style="width: 1100px;height:300px; "></div>
<div id="main5" style="width: 1100px;height:290px; "></div>
</body>
<script type="text/javascript" th:src="@{/js/jquery-1.8.3.min.js}"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart2 = echarts.init(document.getElementById('main2'));
    var myChart3 = echarts.init(document.getElementById('main3'));
    var myChart1 = echarts.init(document.getElementById('main'));
    var myChart4 = echarts.init(document.getElementById('main4'));
    var myChart5 = echarts.init(document.getElementById('main5'));
    option2 = {
        backgroundColor: '#fefefe',
        title: {
            text: '放款转换率',
            subtext: ''
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}%"
        },
        toolbox: {
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        legend: {
            data: ['游览','贷款','放款'],
            left: 'center',
            bottom: 'top'
        },
        calculable: true,
        series: [
            {
                name:'漏斗图',
                type:'funnel',
                left: '10%',
                top: 100,
                //x2: 80,
                bottom: 100,
                width: '60%',
                // height: {totalHeight} - y - y2,
                min: 0,
                max: 150,
                minSize: '0%',
                maxSize: '120%',
                sort: 'descending',
                gap: 2,
                label: {
                    show: true,
                    position: 'inside'
                },
                labelLine: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                        fontSize: 20
                    }
                },
                data: [
                    {value: 60, name: '游览'},
                    {value: 40, name: '贷款'},
                    {value: 20, name: '放款'}

                ]
            }
        ]
    };
        myChart2.setOption(option2);



        var colors = ['#5793f3', '#d14a61', '#675bba'];
        option3 = {
        color: colors,
        title: {
            text: '贷款概况',
            left: 'center'
        },
        backgroundColor: '#fefefe',
        tooltip: {
            trigger: 'none',
            axisPointer: {
                type: 'cross'
            }
        },
        legend: {
            bottom: 'top',
            textFont: 'bold 20px verdana',
            data:['贷款人数','放款金额', '放款人数']
        },
        grid: {
            top: 70,
            bottom: 50
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                    onZero: false,
                    lineStyle: {
                        color: colors[1]
                    }
                },
                axisPointer: {
                    label: {
                        formatter: function (params) {
                            return '放款金额  ' + params.value
                                + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                        }
                    }
                },
                data: ['5-01', '5-02', '5-03', '5-04', '5-05', '5-06', '5-07', '5-08', '5-09', '5-10', '5-11', '5-12', '5-13']
            },
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                    onZero: false,
                    lineStyle: {
                        color: colors[0]
                    }
                },
                axisPointer: {
                    label: {
                        formatter: function (params) {
                            return '贷款人数  ' + params.value
                                + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                        }
                    }
                },
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: []
    };
    $(function () {
        $.ajax({
            "url": "/jh/qryThenumberAll",
            "type": "get",
            "data": {},
            "datetype": "JSON",
            "success": function (data) {
                option3.series = [data.serieA, data.serieB, data.serieC];
                myChart3.setOption(option3);
                console.log(option3.series)
            }
        })
    });


    option1 = {
        backgroundColor: '#fefefe',
        title : {
            text: '新老客户贷款构成',
            left: 'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            right: 'right 20px',
            data: ['新客户','旧顾客']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'新客户'},
                    {value:310, name:'旧顾客'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart1.setOption(option1);

    option4 = {
        title : {
            text: '贷款走势数据',
            left: 'center'
        },
        backgroundColor: '#fefefe',
        xAxis: {
            type: 'category',
            data: ['05-01', '05-02', '05-03', '05-04', '05-05', '05-06', '05-07','05-08','05-09','05-10','05-12','05-13']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130,152,124,85,85,142],
            type: 'bar'
        },
            { data: [110, 100, 250, 180, 170, 210, 230,252,154,185,285,242],
                type: 'line'
    }
        ]
    };
    myChart4.setOption(option4);

    option5 = {
        title : {
            text: '贷款金额分布',
            left: 'center'
        },
        backgroundColor: '#fefefe',
        xAxis: {
            type: 'category',
            data: ['0-50', '51-100', '101-200', '201-500', '501-1000', '1001-5000', '5001-10000','10001以上']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [20, 20, 15, 80, 70, 11, 13,15],
            type: 'bar'
        }]
    };
    myChart5.setOption(option5);
    </script>
</html>